<template>
  <div class="q-pa-md">
    <div class="row q-gutter-md q-mb-md">
      <t-btn
        :label="`Scroll to ${position}px`"
        color="primary"
        @click="scroll"
      />
      <t-btn
        :label="`Animate to ${position}px`"
        color="primary"
        @click="animateScroll"
      />
    </div>

    <t-scroll-area ref="scrollAreaRef" style="height: 150px; max-width: 300px">
      <ol>
        <li v-for="n in 1000" :key="n">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </li>
      </ol>
    </t-scroll-area>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const position = ref(300);
      const scrollAreaRef = ref(null);

      return {
        position,
        scrollAreaRef,

        scroll() {
          scrollAreaRef.value.setScrollPosition('vertical', position.value);
          position.value = Math.floor(Math.random() * 1001) * 20;
        },

        animateScroll() {
          scrollAreaRef.value.setScrollPosition(
            'vertical',
            position.value,
            300,
          );
          position.value = Math.floor(Math.random() * 1001) * 20;
        },
      };
    },
  };
</script>
